<template>
  <section class="group-list">
    <div class="title">
      <div class="title-left">未通过审核的项目</div>
      <div class="title-right"><span @click="deleted">私信管理员</span></div>
    </div>
    <div class="inner">
      <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px">
        <Checkbox class="list-top"
                  :indeterminate="indeterminate"
                  :value="checkAll"
                  @click.prevent.native="handleCheckAll">全选
          <span>项目信息</span>
          <span>项目类别</span>
          <span>发布时间</span>
        </Checkbox>
      </div>
      <CheckboxGroup v-model="checkid" @on-change="checkAllGroupChange">
        <ul>
          <li class="out-list clearfix" v-for="(i,k) in checkAllGroup">
            <Checkbox :label="i.id" style="float: left">
              <div style="display: inline-block;width: 140px;height: 114px"><img  :src="$Url+i.images" alt="" style="width: 140px;height: 114px"></div>
            </Checkbox>

            <div style="float: left;">
              <ul>
                <li>
                  <span style="display: block;width:478px;float: left">标题：{{i.name}}</span>
                  <span >{{i.group_name}}</span>
                  <span style="margin-left: 80px">{{i.addtime}}</span>
                </li>
                <li class="yuanyin">
                  <span >原因</span>
                  <span>审核时间:{{i.creatime}}</span>
                  <span style="color: #FE5371">该项目未通过审核，请安提示修改重新提交审核！</span>
                  <span>重新编辑</span>
                </li>
                <li class="content">
                  <p>{{i.content}}</p>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </CheckboxGroup>
    </div>
    <div style="text-align: center;margin: 20px 0"> <Page :total="num" @on-change="pab" /></div>
  </section>
</template>

<script>
import SimpleTitle from '../../../components/Title/SimpleTitle'
export default {
  name: 'ProjectUncheck',
  components: {
      SimpleTitle
  },
   data () {
      return {
          formItem: {},
          indeterminate: true,
          checkAll: false,
          checkAllGroup: [],
          checkid:[],
          id:[],
          selected:3,
          ids:'',
          num:0,
          page:1
      }
   },
    created () {
        this.getinfo()
    },
    computed: {

    },
    methods: {
        pab (page) {
            this.page = page
            this.getinfo()
        },
        fun () {

        },

        deleted () {

        },
        getinfo () {
            let _this = this
            _this.$post('/api/goods/getGoodsList',
                {
                    token:_this.$token,
                    status:_this.selected,
                    page:_this.page,
                    num:10
                },function (res) {
                    _this.num = parseInt(res.data.length)
                    _this.checkAllGroup = res.data
                    _this.checkAllGroup.forEach(function (i) {
                        _this.id.push(i.id)
                    })
                },function (err,errmsg,errcode) {
                    _this.$message.error(errmsg);

                }
            )
        },
        handleCheckAll () {
            if (this.indeterminate) {
                console.log(this.indeterminate)
                this.checkAll = true;
            } else {
                this.checkAll = !this.checkAll;
            }
            this.indeterminate = false;

            if (this.checkAll) {
                this.checkid =this.id;
            } else {
                this.checkid = [];
            }
        },
        checkAllGroupChange (data) {
            if (this.checkid.length === this.checkAllGroup.length) {
                this.indeterminate = false;
                this.checkAll = true;
            } else if (data.length > 0) {
                this.indeterminate = false;
                this.checkAll = false;
            } else {
                this.indeterminate = false;
                this.checkAll = false;
            }
        }
    }
}

</script>

<style lang="less" scoped>
  @import "../../../style/style.less";
  .group-list{
    border: 1px solid @border-color;
    padding: 15px;
    .yuanyin{
      padding-left: 0 !important;
      margin-top: 5px;
      >:first-child{
        display: block;
        width:50px;
        height: 30px;
        line-height: 30px;
        float: left;
        border: 1px solid #e0e0e0;
        text-align: center;
        border-bottom: 4px solid @theme-color-dark;
        margin-right: 20px;
      }
      >:nth-child(2){
        margin-right: 30px;
      }
      >:last-child{
        background-color: @theme-color-dark;
        color: white;
        padding: 1px 8px;
        border-radius: 2px;
        float: right;
      }
    }
    .content{
      margin-top: 2px;
      background-color: #f8f8f8;
      border: solid 1px #e0e0e0;
      line-height: 20px !important;
    }
    .title{
      color: #ff5371;
      font-size: 18px;
      padding-bottom: 8px;
      overflow: hidden;
      border-bottom: 1px solid @theme-color-dark;
      margin-bottom: 2px;
    }
    .title-left{
      float: left;
      font-size: 18px;
    }
    .title-right{
      float: right;
    }
    .title-right span{
      margin-right: 10px;
    }
    .title span{
      padding: 7px 10px;
      background-color: #ff5371;
      border-radius: 4px;
      color: #fff;
      outline: none;
      border: none;
      font-size: 14px;
      border-bottom: 2px solid red;
    }

    .out-list{
      /*height: 115px;*/
      padding: 10px;
      border-bottom: 1px dashed #eeeeee;
    }
    .out-list ul li:first-child{
      background-color: #eeeeee;
    }
    .ivu-icon[data-v-5e279927]{
      color: #FE5371;
    }
    .out-list ul li{
      width: 760px;
      /*height: 30px;*/
      padding-left: 10px;
      line-height: 30px;
    }
    .out-list ul li:first-child{
      background-color: #F8F8F8;
    }
    .ivu-icon[data-v-061bc96f]{
      color: #FE5371;
    }
    .list-top{
      line-height: 30px;
      width: 946px;
      height: 30px;
      padding-left: 10px;
      background-color: #F5EEEF;
    }
    .list-top span{
      margin: 0 246px;
    }
    .list-top>:nth-child(3){
      margin: 0 70px;
    }
    .list-top>:nth-child(4){
      margin: 0 56px;
    }
  }
</style>
